<template>
	<view>
		<view class="bg_orderDetail">
			<view class="padding text-white rowsb align-center align-center">
			</view>
			<view class="padding text-white">
				待付款
			</view>
		</view>
		<!-- 		<view class="bg-white padding margin radius align-center " style="margin-top: -150rpx;" @click="addressMen()">
			<view class="align-center">
				<view>
					<image src="../../static/dingwei.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view class="margin-left-sm">
					<view>{{AddressList.name}}</view>
					<view class="onelineshow">
						地址{{AddressList.sca_name}}{{AddressList.address}}
					</view>
				</view>
				<view class="margin-left" v-if="AddressList==''">
					请选择收货地址
				</view>
			</view>
		</view> -->
		<view class="bg-white margin padding radius">
			<view class="solid-bottom padding-bottom">
				商品详情
			</view>
			<view>
				<view class="margin-top flex">
					<image :src=" image+signDetailData.img" mode="aspectFill" style="width: 250rpx;height: 200rpx;" class="radius bg-gray"></image>
					<view style="width: 370rpx;">
						<view class=" rowsb margin-left-sm onelineshow">
							<view class="">{{signDetailData.title}}</view>
							<view>{{signDetailData.price}}￥</view>
						</view>
						<view class="justify-end margin-top">
							X1
						</view>
					</view>
				</view>
				<view class="rowsb padding-tb  ">
					<view>报名费 </view>
					<view class="text-red ">￥{{signDetailData.price}}</view>
				</view>
			</view>
		</view>
		<view class="margin radius" style="overflow: hidden;">
			<view class="bg-white solid-bottom padding rowsb">
				<view>
					用户名称：
				</view>
				<input type="text" value="" placeholder="请输入用户名称" style="font-size: 28rpx;text-align: right;" v-model="userName" />
			</view>
			<view class="bg-white padding solid-bottom rowsb">
				<view>
					手机号：
				</view>
				<input type="number" maxlength="11" value="" placeholder="请输入手机号码" style="font-size: 28rpx;text-align: right;"
				 v-model="userPhone" />
			</view>

			<view class="bg-white  padding ">
				<view>备注</view>
				<textarea value="" placeholder="请输入备注" class="padding" style="border: 1rpx solid #EEEEEE;height: 200rpx;width: 90%;"
				 v-model="content" />
				</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="bg-white padding-sm position-bottom justify-end solid-top" style="position: fixed;z-index: 1;bottom: 0;left: 0;right: 0;"
		 @click="payTypeDataMen">
			<view class="border padding-lr padding-tb-sm margin-left round" style="color: #235099;border: 1rpx solid #235099;">立即支付</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		getAllAddress,
		signData,
		productSignUp,
		MenShop,
		aliplice
	} from '../../common/path.js'
	export default {
		data() {
			return {
				AddressList: [],
				signDetailData: [],
				image: '',
				userName:'',
				userPhone:'',
				detailId:'',//商品id
				content:'',//备注
				payDataType:2
			}
		},
		onLoad(option) {
			this.image = app.image
			this.detailId = option.id
			// this.getAllAddress() //获取订单地址
			this.signData(option.id)
		},
		methods: {
			addressMen() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
		
			//获取详情接口
			signData(id) {
				let data = {
					id: id
				}
				this.$axios.axios('POST', signData, data)
					.then(res => {
						if (res.status == 1) {
							this.signDetailData = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
						console.log('获取商品详情接口======>', res.data)
					})
			},
			payTypeDataMen(){
				if(this.userPhone.length !=11){
				this.$tools.showToast('请输入正确的手机号')
				}else if(this.userName==''){
					this.$tools.showToast('请输入用户名')
				}else {
					this.payType()
				}
			},
			payType(){
					let that = this
					uni.showActionSheet({
						itemList: ['微信支付', '支付宝支付'],
						success: function(res) {
							if(res.tapIndex==0){
								that.MenShop(1)
							}else{
								that.MenShop(2)
							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
			},
			
			
			//报名接口
			MenShop(event) {
				let data = {
					uid: app.userInfo.id,
					goods_id: this.detailId, //会员名称
					num:1,
					pick_name:this.userName,
					pick_tel:this.userPhone,
					remark:this.content
				}
				this.$axios.axios('POST', MenShop, data)
					.then(res => {
						console.log('报名', res)
						if (res.status == 1) {
							this.aliplice(res.data,event)
							setTimeout(r => {
							}, 500)
						}else{
							this.$tools.showToast(res.msg)
						}
					})
					.catch(err => {
						this.$tools.showToast(err)
						console.log(err);
					})
			},


			//报名转支付接口
			aliplice(orderId,event) {
				let data = {
					type: this.payDataType,
					id: orderId, //支付订单id
					pay_type: event, //支付方式
					uid: app.userInfo.id, //用户id
				}
				this.$axios.axios('POST', aliplice, data)
					.then(res => {
						console.log('1=>', res);
						if (res.status == 1) {
							this.$tools.showToast(res.msg)
							if (event == 1) {
								//wx
								this.wechatPay(res.data)
							} else {
								// zfb
								this.alipay(res.data)
							}
						}
					})
					.catch(err => {
						console.log('2=>', err);
					})
			},
			//微信支付
			wechatPay(data) {
				// console.log(data, '微信支付');
				console.log(JSON.parse(data),'微信支付');
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: JSON.parse(data),
					success: (res) => {
						console.log('wx支付=>',res)
						this.$tools.showToast('支付成功')
						setTimeout(r=>{
							uni.navigateTo({
								url:'../order/orders?id=' +1
							})
						},1000)
					},
					fail: (res) => {
						console.log(res, 'fail');
					}
				})
			},
			//支付宝支付
			alipay(data) {
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data,
					success: (res) => {
						console.log('支付宝=>',res)
						this.$tools.showToast('支付成功')
						setTimeout(r=>{
							uni.navigateTo({
								url:'../order/orders?id=' +1
							})
						},1000)
					}
				})
			},


		}
	}
</script>

<style>
	.bg_orderDetail {
		background-color: #235099;
	}
</style>
